<template>
  <div>
    <ElInput v-model="uid" placeholder="" style="width: 100px"></ElInput>
    <ElButton @click="init">发起连接</ElButton>
    <el-divider></el-divider>
    进入房间号 <ElInput
      v-model="chatMessage.url"
      placeholder=""
      style="width: 100px"
    ></ElInput>
    <el-divider></el-divider>
    信息<ElInput
      v-model="chatMessage.content"
      placeholder=""
      style="width: 100px"
    ></ElInput>
   
    <ElButton @click="send">发送聊天信息</ElButton>
    <el-divider></el-divider>
    <div>
      <template v-for="(e, i) in history" :key="i">
        <div>{{ e }}</div>
      </template>
    </div>
  </div>
</template>
<script lang="js">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: "AboutView",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      uid:'zhangsan',
      // msg:'',
      history:[],
      ws:null,
      chatMessage:{
        url:'all',
        content:"",
        type:"",
        sender:"",
        to:"wangwu",
      }
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    init(){
      // ws://  http://
      // 不可以使用axios发送
      // const ws = new WebSocket("http://192.168.87.210:8080/chat")
      const ws = new WebSocket("http://10.20.37.10:8080/chat/"+this.uid)
      // 1 个状态 两个方法send close 三个事件
      this.ws= ws;
      // 预先准备
      ws.onopen=(a,b)=>{
        console.log("连接成功",a,b)
      }
      ws.onmessage=(messageEvent,b)=>{
        console.log("收到信息",messageEvent,b)
        this.history.push(messageEvent.data)
      }
      ws.onclose=(a,b)=>{
        this.$message.warning("包含非法字符，强制下线")
        console.log("关闭连接",a,b)
      }

    },
    send(){
      const ws = this.ws
      console.log(this.ws)

      // ws.send(this.msg)
      ws.send(JSON.stringify(this.chatMessage));
    }
  },
  watch: {
    // sampleP(n, o) {},
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
